<template>
	<view class="code">
		<view class="text">
			<image src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u625.png"></image>
			<text>向商家展示支付会员码</text>
		</view>
		<image class="line" src=" https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u623.png"></image>
		<view class="picture">
			<view class="top">
				<image src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u617.png"></image>
				<image src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u617.png"></image>
				<image src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u617.png"></image>
				<image src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u617.png"></image>
			</view>
			<view class="cen">
				<text>5089009000990000009900</text>
				<image src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u621.png"></image>
			</view>
			<image class="line" src=" https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u623.png"></image>
			<view class="bot">
				<text>账户余额</text>
				<text>￥</text>
				<text>{{balance}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad: function (option) { 
				console.log(option.balance);
				this.balance=option.balance;
			},
		data() {
			return {
				balance:''
			}
		},
		methods: {
			
		}
	}
</script>

<style>
page{
	background-color: rgba(245, 247, 247, 1);
}
.code{
	margin: 50rpx 40rpx;
	width: 670rpx;
	height: 900rpx;
	border-radius: 18rpx;
	background-color: rgba(255, 255, 255, 1);
	border: 1rpx solid rgba(239, 239, 239, 1);
	box-shadow: 0px 0px 10px rgba(204, 204, 204, 0.4);
}
.text{
	width: 610rpx;
	height: 80rpx;
	padding-top: 20rpx;
	margin: 0 30rpx;
	display: flex;
	align-items: center;
}
.text image:first-child{
	width: 30rpx;
	height: 30rpx;
	margin-right: 20rpx;
}
.line{
	width: 610rpx;
	height: 5rpx;
	margin: 15rpx 30rpx;
}
.picture{
	padding-top: 20rpx;
	width: 610rpx;
	margin: 0 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.top{
	width: 610rpx;
	display: flex;
	align-items: center;
}
.top image{
	width: 150rpx;
	height: 120rpx;
}
.cen{
	width: 610rpx;
	padding-top: 20rpx;
}
.cen image{
	width: 360rpx;
	height: 360rpx;
	padding-bottom: 20rpx;
}
.cen text{
	font-size: 28rpx;
}
.bot{
	width: 610rpx;
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.bot text:nth-child(1){
	font-size: 24rpx;
	color: #999999;
}
.bot text:nth-child(2){
	font-size: 24rpx;
}
.bot text:nth-child(3){
	font-size: 36rpx;
}
</style>
